<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}
.list_title{padding-bottom: 30px;}
.toolbar_header {
    white-space: normal;
}
</style>

<template>
  <div>

      <template v-if="routerPath=='cnywithverify'" >
        <div v-loading="loading">
          <!--工具条-->
          <el-col :span="24" class="toolbar toolbar_header" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
              <el-form-item label="取现状态:">
                <el-select v-model="filters.status" placeholder="请选择">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="待审核" value="20"></el-option>
                  <el-option label="已完成" value="22"></el-option>
                  <el-option label="已拒绝" value="21"></el-option>
                </el-select>
              </el-form-item>             
              <el-form-item label="开始时间">
                <el-date-picker type="date" placeholder="开始时间" v-model="filters.beginDate"  @change="getSTimeB" format="yyyy-MM-dd" value-format="yyyy/MM/dd"  style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间">              
                <el-date-picker type="date" placeholder="结束时间" v-model="filters.endDate"  @change="getSTimeD" format="yyyy-MM-dd" value-format="yyyy/MM/dd"  style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="真实姓名:">
                <el-input v-model="filters.realName" placeholder="等值匹配"></el-input>
              </el-form-item>   
              <el-form-item label="序列号:">
                <el-input v-model="filters.serial" placeholder=""></el-input>
              </el-form-item>           
              <el-form-item>
                <el-button type="primary" v-on:click="fetchData">搜索</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="batchRemove" :disabled="this.sels.length===0">批量审核</el-button>
              </el-form-item>
               <el-form-item>
                <el-button type="primary" @click="batchExport" :disabled="this.sels.length===0">批量导出</el-button>
              </el-form-item>
            
            </el-form>
          </el-col>        
        <!-- table start  -->
        <el-table :data="list" style="width: 100%" max-height="1000" @selection-change="selsChange">
         <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="ID"     type="index"    width="60">
          </el-table-column>
        <!--   <el-table-column prop="loginName" label="用户ID" >
          </el-table-column> -->
          <el-table-column prop="userName" label="用户名" >
          </el-table-column>   
          <el-table-column prop="realName" label="真实姓名" >
          </el-table-column>          
          <el-table-column prop="amount" label="提现金额" >
          </el-table-column>       
          <el-table-column prop="fee" label="手续费" >
          </el-table-column>
          <el-table-column prop="amountReal" label="扣除手续费后金额" >
          </el-table-column>
          <el-table-column prop="name" label="提现开户名">
          </el-table-column>
          <el-table-column prop="bankName" label="银行名称/账号" width="197" >
          </el-table-column>
          <el-table-column prop="status" label="提现状态" :formatter="formatSex" >
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间">
          </el-table-column>
          <el-table-column prop="amountReal" label="确认金额">
          </el-table-column>
          <el-table-column prop="remark" label="确认备注">
          </el-table-column>         
          <el-table-column label="操作">
            <template slot-scope="scope">       
              <span class="span_btn" v-if="scope.row.status==30"  @click="toggleStatus(scope.$index, scope.row)" >审核</span>
             
            </template>
          </el-table-column>
        </el-table>
          <!--工具条-->
        <el-col :span="24" class="toolbar toolbar_footer">
          <el-pagination v-if="total" background layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
          </el-pagination>
        </el-col>
        <!-- table end  -->
           <!-- 提现审核 -->
        <el-dialog title="提现审核" top="0"  class="form_part sellorder" :visible.sync="withVerifyVisible"  :close-on-click-modal="false">
            <el-form :model="withVerify" class="" label-width="100px" :rules="withVerifyRules" ref="withVerify">
                                     
                <el-form-item label="状态" prop="status">
                  <el-select v-model="withVerify.status" placeholder="请选择状态">
                    <el-option label="完成" value="32" ></el-option>
                    <el-option label="审核拒绝" value="31" ></el-option>                    
                  </el-select>
                </el-form-item>    
                
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="withVerify.remark" placeholder="请输入备注说明" auto-complete="off"></el-input>
                </el-form-item>
                
                <el-form-item class="btn_add">
                   <el-button style="width:100%" type="primary"  @click.native="sureVerify('withVerify')" :loading="withVerifyLoading">确定</el-button>
                </el-form-item>
             
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
              <el-button style="width:100%" type="primary"  @click.native="addSubmit('addForm')" :loading="addLoading">添加</el-button>
             
            </div> -->
        </el-dialog>
      </div>
      </template>
       <template v-else>
        <router-view></router-view>
      </template>
  </div>

  
  
</template>

<script>
import * as cnyrecharge from '../api/cnyrecharge';

let myMixin = {
  data: function() {
    return { cnyrecharge }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      withVerifyVisible:false,
      withVerifyLoading:false,
      withVerify:{},
      withVerifyRules:{
        status:[
            { required: true, message: '请选择状态', trigger: 'change' }        
        ],
        remark:[
            { required: true, message: '请输入备注说明', trigger: 'blur' }
        
        ],

      },
      sels: [],//列表选中列      
      filters:{},
      isDel:true,
      isEdit:true,
      isReleRole:true,
      isReleGroup:true,
      total: 10,
      page: 1,
      showCount:10,
      routerPath:'',
      addLoading:false,//
      editLoading:false,//
      list: [
        { userName:"test",
          status:20,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
          idNo:'1',
        },
        { userName:"test",
          status:2,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
          idNo:'2',
        }
      ],
      canReset: true,
      loading: false,
      groupId:'',//组id
      userId:'',//用户id
      remark:'通过',//备注
      verifyItem:'',

    }
  },
  methods: {
    getSTimeB:function(val){
      console.log(val)
      this.filters.beginDate=val;
    },
    getSTimeD:function(val){
      this.filters.endDate=val;
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量审核
    batchRemove: function () {
      console.log(this.sels);
      var ids = this.sels.map(item => item.mechId).toString();
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let para = { mechIdList: ids };
            UserStore.delUserStore(para,(res)=>{
                this.listLoading = false;
            if(res.retCode==1){
              this.$message("删除成功");
                    this.getUsers();
                }
            })
      }).catch(() => {

      });
    },
    //批量导出
    batchExport:function(){
      console.log(this.sels);
      var ids = this.sels.map(item => item.mechId).toString();
      return;
      //请求统计数据不分页
      let para={
          feeId:this.childId,
          feeItemId:this.childItemId          

          }
        payStore.selectPayCountTotal(para,(res)=>{
          if(res.retCode==1){
            this.countTotal=res.data;

            let param={
              fileTitle:'缴费项统计表',
              headers:JSON.stringify({"orderId":"订单号","userName":"姓名","studentNo":"学号","nickName":"昵称","payAmount":"缴费金额","payMode":"缴费方式","payTradeType":"支付来源","payDate":"缴费时间"}),
              datas:JSON.stringify(this.countTotal)
            }
            payStore.importExcel(param,(res)=>{
              if(res.retCode==1){
                this.exportUrl=res.data;
                location.href=res.data;
              }else{
                this.$message({message:res.retMsg,type:'error'})
              }
            });

          }else{
            this.$message({message:res.retMsg,type:'error'})
          }
        });
    },
    toggleStatus:function(index,row){
      //状态操作--审核
      this.withVerifyVisible=true;
    
      this.verifyItem=row;    
    },
    sureVerify(){
      this.$refs.withVerify.validate((valid) => {
        if (valid) {
          let para={
            idNo:this.verifyItem.idNo,
            status:this.withVerify.status,
            remark:this.withVerify.remark,
          }
          console.log(para)
          cnyrecharge.withdrawReview.r(para).then((res) => {
            console.log(res)

            if(res.data.retCode==1){
              this.withVerifyVisible=false;
              this.fetchData();
            }else{
              this.$message.error(res.data.retMsg);
            }
              this.loading = false;
            
          });
        }else{
          console.log('error submit!!');
          return false;

        }

      })

    },
     //状态转换
    formatSex: function (row, column) {
      return row.status == 30 ? '待审核' : row.status == 31 ? '拒绝' :row.status == 32 ? '完成' :row.status == 40 ? '未付款' :row.status == 41 ? '到账成功' : row.status == 42 ? '人工到账' : '处理中';
    },
    handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
      this.fetchData();
    },

    
    fetchData(init) {
      this.loading = true;
   /*   if(!this.$_has([cnyrecharge.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }*/
      let para = {
          // groupId:this.groupId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
          tradeNo:this.filters.tradeNo,

          beginDate:this.filters.beginDate,

          endDate:this.filters.endDate,

          status:this.filters.status,

          realName:this.filters.realName,

       
        };
   
      console.log(para);
      cnyrecharge.requestWith.r(para).then((res) => {
        console.log(res)

        if(res.data.retCode==1){
          this.total=parseInt(res.data.data.totalRow);
          if(this.total>0){
            this.list = res.data.data.list;

          }
        }else{
          this.$message.error(res.data.retMsg);
        }
          this.loading = false;
        
      });
    },
    requestNotAllowed: function(){
      cnyrecharge.notAllowed.r();
    }
  },
  watch: {
          // 如果路由有变化，会再次执行该方法
          "$route": function(){
            this.routerPath=this.$route.path.split("/").pop();
            this.groupId="";
            this.fetchData(true)

          }
  },
  created() {
   /* this.isReleRole=this.$_has([cnyrecharge.releRolesUser]);
    this.isReleGroup=this.$_has([cnyrecharge.releGroupUser]);
    this.isEdit=this.$_has([cnyrecharge.modify]);
    this.isDel=this.$_has([cnyrecharge.remove]);
    if(this.$route.query.groupId!=undefined&&this.$route.query.groupId!="undefined"&&this.$route.query.groupId!=""){
      this.groupId=this.$route.query.groupId;
    }*/

    this.fetchData(true)
    /*console.log(this.$route.path.split("/").pop())*/
    this.routerPath=this.$route.path.split("/").pop();
    

  }
}
</script>